<template>
    <!-- 头像 -->
    <div class="user-avatar">
        <ShowLocalImage :width="width" :fileId="userId" partType="avatar"
            :forceGet="avatarInfoStore.getForceReload(userId)" @click="showDetailHandler"
            :style="{ width: width + 'px', height: width + 'px', 'border-radius': borderRadius + 'px' }" />
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
import { useAvatarInfoStore } from "@/stores/AvatarInfoStore";
const avatarInfoStore = useAvatarInfoStore()

const { proxy } = getCurrentInstance();

const props = defineProps({
    width: {
        type: Number,
        default: 170,
    },
    userId: {
        type: String,
    },
    // 边框是否圆角
    borderRadius: {
        type: Number,
        default: 0,
    },
    // 点击后是否会显示图片详情
    showDetail: {
        type: Boolean,
        default: false,
    },
})

const showDetailHandler = async () => {
    if (!props.showDetail) {
        return;
    }
    avatarInfoStore.setForceReload(props.userId, false)
    // 展示图片详情
    await myApi.openMediaDetailWindow({
        windowId: "media-detail",
        title: "查看图片",
        path: "/showMediaDetail",
        data: {
            mediaFileList: [
                {
                    fileId: props.userId,
                    partType: "avatar",
                    fileType: "IMAGE",
                    status: "SENT",
                    forceGet: true
                }
            ],
        }
    });
    // 点了对方的头像就强制刷新头像
    avatarInfoStore.setForceReload(props.userId, true)
}

</script>

<style lang="scss" scoped>
.user-avatar {
    background: #d3d3d3;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
</style>
